<template>
<div>
  <div class="dd">
<div class="tou" v-if="$route.meta.isShow">
   <el-badge is-dot class="t1">直播</el-badge>
    <i class="el-icon-search i"></i>
    <input @click="chang(7)" class="button" placeholder="如何备考事业单位" type="text">
    <div class="icon">+</div>
  </div>
  <div v-if="$route.meta.isShow" class="huakuai">
      <div class="active2" :class="{active1:num===1}" @click="chang(1)">关注</div>
      <div class="active2"  :class="{active1:num===2}" @click="chang(2)">推荐</div>
      <div class="active2"  :class="{active1:num===3}" @click="chang(3)">热榜</div>
      <div class="active2"  :class="{active1:num===4}" @click="chang(4)">科学</div>
      <div class="active2"  :class="{active1:num===5}" @click="chang(5)">知识</div>
      <div class="active2"  :class="{active1:num===6}" @click="chang(6)">心理</div>
      
    <i @click="chang(8)" class="el-icon-s-fold i"></i>
  </div>  
</div>

</div>

   
</template>

<script>
export default {
  name: 'Header',
  data(){ 
      return{
            num:1  
      }
  
  },
  methods:{ 
   
      chang(type){ 
          this.num = type
         if(type===1){
              this.$router.push('/home/follow') 
        }else if(type===2){ 
             this.$router.push('/home/mend')
        }else if(type===3){ 
             this.$router.push('/home/chart')
        }else if(type===4){ 
             this.$router.push('/home/science')
        }else if(type===5){ 
             this.$router.push('/home/konw')
        }else if(type===6){ 
             this.$router.push('/home/heart')
        }else if(type===7){ 
             this.$router.push('/home/sousuo')
        }else if(type===8){ 
             this.$router.push('/home/moban')
        }else if(type===9){
             this.$router.push('/home/quanzi')
        }
}
}
}
</script>

<style lang='less' scoped>
.dd{
      position: fixed;
      width: 370px;
      height: 75px;
      top: 0px;
      background-color: #fff;
   .tou{
        display: flex;
        margin-top: 10px;
        .t1{
          margin-top: 5px;
          margin-left: 10px;
            font-size: 18px;
        }
       .button{
        width: 220px;
        height: 25px;
        border-radius: 50px;
        outline: none;
        border: none;
        background-color: #eee;
        padding-left: 35px;
    }
    .i{
        font-size: 16px;
        position: relative;
        bottom: -6px;
        right: -30px;
    } 
    .icon{
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color:rgb(23, 122, 235);
        margin-left: 15px;
        color: rgb(247, 242, 242);
        font-size: 20px;
        text-align: center;
        line-height: 24px;
        
    }
    }
    .huakuai{
      margin-top: 10px;
      display: flex;
      justify-content: space-around;
      padding-bottom: 10px;
        .active2{ 
        font-weight: bold;                                                                                                                                                                                                                                                                                                                                            
        &.active1{
            transform: scale(1.2);
            color: black;
      &::after{
        content: '';
        position: absolute;
        width: 12px;
        height: 3px;
        border-radius: 30%;
        background-color: #034ebe;
        top: 20px;
        left: 10px;        
      }
        }

    }
      i{
        font-size: 18px;
      }
    }
}
</style>
